<template>
  <div class="chartsdom" ref="chart" id="chart" v-chart-resize></div>
</template>
<script setup lang="ts">
import * as ECharts from "echarts"; // 全部引入Echarts
import { os } from "@/utils/device";
import UAParser from "ua-parser-js";
const { proxy } = getCurrentInstance();
// 获取设备类型
function getDevice() {
  if (os().isAndroid || os().isPhone) {
    // 手机

    return "PHONE";
  } else if (os().isTablet) {
    // 平板

    return "PAD";
  } else if (os().isPc) {
    // 电脑

    return "PC";
  }
}

const chart = ref(null);

const obj = reactive({
  option: null,
});
const getEchart = () => {
  obj.option = {
    backgroundColor: "transparent",
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c}%",
    },
    grid: {
      left: proxy.$fitChartSize(10),
      right: proxy.$fitChartSize(20),
      top: proxy.$fitChartSize(20),
      bottom: proxy.$fitChartSize(10),
      containLabel: true,
    },
    calculable: true,
    series: [
      {
        color: ["#0db1cdcc"],
        name: "计划投入",
        type: "funnel",
        width: "45%",
        height: "70%",
        x: "5%",

        minSize: "10%",
        funnelAlign: "right",

        center: ["50%", "50%"], // for pie

        data: [
          {
            value: 30,
            name: "下单30%",
          },
          {
            value: 55,
            name: "咨询55%",
          },
          {
            value: 65,
            name: "点击65%",
          },
          {
            value: 60,
            name: "访问62%",
          },
          {
            value: 80,
            name: "展现80%",
          },
        ].sort(function (a, b) {
          return a.value - b.value;
        }),
        roseType: true,
        label: {
          normal: {
            formatter: function () {},
            position: "inside",
          },
        },
        itemStyle: {
          normal: {
            borderWidth: 0,
            shadowBlur: proxy.$fitChartSize(20),
            shadowOffsetX: 0,
            shadowOffsetY: proxy.$fitChartSize(5),
            shadowColor: "rgba(0, 0, 0, 0.3)",
          },
        },
      },

      {
        color: ["#0C66FF"],
        name: "实际投入",
        type: "funnel",
        width: "45%",
        height: "70%",
        x: "50%",

        minSize: "10%",
        funnelAlign: "left",

        center: ["50%", "50%"], // for pie

        data: [
          {
            value: 35,
            name: "下单35%",
          },
          {
            value: 40,
            name: "咨询40%",
          },
          {
            value: 70,
            name: "访问70%",
          },
          {
            value: 90,
            name: "点击90%",
          },
          {
            value: 95,
            name: "展现95%",
          },
        ].sort(function (a, b) {
          return a.value - b.value;
        }),
        roseType: true,
        label: {
          normal: {
            position: "inside",
          },
        },
        itemStyle: {
          normal: {
            borderWidth: 0,
            shadowBlur: proxy.$fitChartSize(20),
            shadowOffsetX: 0,
            shadowOffsetY: proxy.$fitChartSize(5),
            shadowColor: "rgba(0, 0, 0, 0.3)",
          },
        },
      },
    ],
  };
  chart.value.setOption(obj.option);
};
// 监听页面变化
onMounted(() => {
  console.log("this", proxy.$fitChartSize());
  window.addEventListener("resize", () => {
    const device = getDevice();
    console.log("现在的类型是", device);
    console.log("-------");
    const parser = new UAParser();
    const result = parser.setUA(navigator.userAgent).getResult();

    console.log("使用ua-parser- 查看", result);
  });
  chart.value = markRaw(
    ECharts.init(document.getElementById("chart") as HTMLDivElement)
  );
  getEchart();
});
</script>
<style lang="scss" scoped>
.chartsdom {
  /*
  可以写成
  width:100vw;
  height:100vh; 
  主要是为了测试
  */
  width: 100%;
  height: 100%;
  background-color: yellow;
}
</style>
